<template>
  <form class="xtx-form" @submit="onSubmitHandler">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <input
          class="input"
          type="text"
          v-model="accountField"
          placeholder="请输入用户名"
        />
      </div>
      <div class="error" v-if="accountError">{{ accountError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input
          class="input"
          type="text"
          v-model="mobileField"
          placeholder="请输入手机号"
        />
      </div>
      <div class="error" v-if="mobileError">{{ mobileError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input
          class="input"
          type="text"
          v-model="codeField"
          placeholder="请输入验证码"
        />
        <span class="code" @click="getMsgCode">{{
          isActive ? `剩余${count}喵` : "发送验证码"
        }}</span>
      </div>
      <div class="error" v-if="codeError">{{ codeError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          v-model="passwordField"
          placeholder="请输入密码"
        />
      </div>
      <div class="error" v-if="passwordError">{{ passwordError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          v-model="rePasswordField"
          placeholder="请确认密码"
        />
      </div>
      <div class="error" v-if="rePasswordError">{{ rePasswordError }}</div>
    </div>
    <input type="submit" class="submit" value="立即绑定" />
  </form>
</template>

<script>
import { useField, useForm } from "vee-validate";
import {
  checkUserAccount,
  code,
  mobile,
  password,
  rePassword,
} from "../../../utils/vee-validate-schema";
import useCountDown from "../../../hooks/useCountDown";
import { createNewAccountBindQQ, getRegisterMsgCode } from "../../../api/user";
import Message from "../../../components/library/Message";
import useLoginAfter from "../../../hooks/useLoginAfter";

export default {
  name: "LoginCallbackBindPatch",
  props: ["unionId"],
  setup(props) {
    const { loginSuccess, loginFail } = useLoginAfter();

    const { handleSubmit, getMobileIsValidate, ...rest } =
      useBindNewAccountFormValid();
    // 表单提交处理
    const onSubmitHandler = handleSubmit((value) => {
      console.log(value);
      // 实现注册新账号并绑定QQ号 完成就是登录状态
      createNewAccountBindQQ({
        unionId: props.unionId,
        account: value.checkUserAccount,
        mobile: value.mobile,
        code: value.code,
        password: value.password,
      })
        .then(loginSuccess)
        .catch(loginFail);
    });

    // 倒计时值和方法
    const { count, start, isActive } = useCountDown();

    // 获取手机验证码
    const getMsgCode = () => {
      // 如果倒计时在执行 阻止程序
      if (isActive.value) return;

      // 验证手机号是否合法
      getMobileIsValidate()
        .then(({ isValid, mobile }) => {
          // 如果手机号验证通过 发送短信
          if (isValid) return getRegisterMsgCode(mobile);
        })
        .then(() => {
          Message({ type: "success", text: "验证马发送成功" });
          start(60);
        })
        .catch(() => {
          Message({ type: "error", text: "验证马发送失败" });
        });
    };

    return {
      handleSubmit,
      ...rest,
      onSubmitHandler,
      getMobileIsValidate,
      count,
      start,
      isActive,
      getMsgCode,
    };
  },
};

//#region 表单校验
function useBindNewAccountFormValid() {
  //   创建表单验证对象
  const { handleSubmit } = useForm({
    validationSchema: {
      checkUserAccount,
      mobile,
      code,
      rePassword,
      password,
    },
  });

  // 验证用户名
  const { value: accountField, errorMessage: accountError } =
    useField("checkUserAccount");
  // 验证手机号
  const {
    value: mobileField,
    errorMessage: mobileError,
    validate: mobileValidate,
  } = useField("mobile");
  // 验证手机验证码
  const { value: codeField, errorMessage: codeError } = useField("code");
  // 验证密码
  const { value: passwordField, errorMessage: passwordError } =
    useField("password");
  // 验证两次密码是否一致
  const { value: rePasswordField, errorMessage: rePasswordError } =
    useField("rePassword");

  // 单独验证手机号
  const getMobileIsValidate = async () => {
    let { valid } = await mobileValidate();

    return {
      isValid: valid,
      mobile: mobileField.value,
    };
  };

  return {
    handleSubmit,
    accountField,
    accountError,
    mobileField,
    mobileError,
    codeField,
    codeError,
    passwordField,
    passwordError,
    rePasswordField,
    rePasswordError,
    getMobileIsValidate,
  };
}

//#endregion

//#region 发送短信验证码

//#endregion
</script>

<style scoped lang="less">
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
